<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js随机数生成练习</title>
    <style>
        body,ul,li{ margin: 0px; padding: 0px; }
        li{ list-style: none;}
        .box{ width: 334px; margin: 20px auto;}
        .warp{ float: left; border: 2px solid #fff;}
        .warp ul{ width: 163px; height: 105px; overflow: hidden; position: relative;}
        .warp ul img{ width: 163px; height: 105px; position: absolute; }
        .warp ul li:nth-of-type(1) img{ left: 0px; top: 0px;}
        .warp ul li:nth-of-type(2) img{ left: 0px; top: 105px;}
        .warp ul li:nth-of-type(3) img{ left: 0px; top: 210px;}
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("box");
            var oDivs=oDiv.getElementsByTagName("div");
            var timer0=null;
            function auto(){
                clearInterval(timer0);
                timer0=setInterval(function(){
                    var n=Math.floor(Math.random()*8+1);
                    rodom(oDivs[n]);
                },1000)
            }
            auto();
            function rodom(obj){
                var oUl=obj.getElementsByTagName("ul")[0];
                var img0=oUl.getElementsByTagName("img")[0];
                var img1=oUl.getElementsByTagName("img")[1];
                var img2=oUl.getElementsByTagName("img")[2];
                move(img0,"top",5,-105,function(){
                    clearInterval(img0.timer);
                    oUl.removeChild(img0.parentNode);
                });
                move(img1,"top",5,0,function(){
                    clearInterval(img1.timer);
                    oUl.appendChild(img0.parentNode);
                    img1.style.top="210px";
                    img2.style.top="105px";
                });
            }
            function move(obj,arrt,step,destination,fun){
                clearInterval(obj.timer);
                step=destination>parseInt(getStyle(obj,arrt))?step:-step;
                obj.timer=setInterval(function(){
                    var dqwz=parseInt(getStyle(obj,arrt))+step;
                    if(dqwz>destination&&step>0 || dqwz<destination&&step<0 ){
                        dqwz=destination;
                        if(fun){
                            fun();
                        }
                    }
                    obj.style[arrt]=dqwz+"px";
                },50)
            }
            /*--获取当前样式---*/
            function getStyle(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }

        }
    </script>
</head>
<body>
<div class="box" id="box">
    <div class="warp">
        <ul>
            <li><img src="img/arr/1.jpg"></li>
            <li><img src="img/arr/2.jpg"></li>
            <li><img src="img/arr/3.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/2.jpg"></li>
            <li><img src="img/arr/3.jpg"></li>
            <li><img src="img/arr/4.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/3.jpg"></li>
            <li><img src="img/arr/4.jpg"></li>
            <li><img src="img/arr/5.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/4.jpg"></li>
            <li><img src="img/arr/5.jpg"></li>
            <li><img src="img/arr/6.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/5.jpg"></li>
            <li><img src="img/arr/6.jpg"></li>
            <li><img src="img/arr/7.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/6.jpg"></li>
            <li><img src="img/arr/7.jpg"></li>
            <li><img src="img/arr/8.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/7.jpg"></li>
            <li><img src="img/arr/8.jpg"></li>
            <li><img src="img/arr/1.jpg"></li>
        </ul>
    </div>
    <div class="warp">
        <ul>
            <li><img src="img/arr/8.jpg"></li>
            <li><img src="img/arr/1.jpg"></li>
            <li><img src="img/arr/2.jpg"></li>
        </ul>
    </div>
</div>

</body>
</html>